<template>
  <div class="app-container">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="工单编号：">
          <el-input v-model="formInline.user" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单状态：">
          <el-select v-model="formInline.region" clearable placeholder="请选择">
            <el-option v-for="(item,index) in statusList" :key="index" :label="item.label" :value="item.value" />

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="main">
      <el-row style="height:60px" type="flex" align="middle">
        <el-button type="primary" @click="add">新建</el-button>
        <el-button type="primary" @click="isConfigureShow = true">工单配置</el-button>
      </el-row>
      <el-table
        :data="taskList"
        style="width: 100%"
        :highlight-current-row="true"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column
          prop="taskCode"
          label="工单编号"
          width="160"
        />
        <el-table-column
          prop="innerCode"
          label="设备编号"
          width="160"
        />
        <el-table-column
          prop="taskType.typeName"
          label="工单类型"
          width="160"
        />
        <el-table-column
          prop="createType"
          label="工单方式"
          width="160"
        />
        <el-table-column
          prop="taskStatus"
          label="工单状态"
          width="160"
        />
        <el-table-column
          prop="userName"
          label="运营人员"
          width="160"
        />
        <el-table-column
          prop="createTime"
          label="创建日期"
          width="160"
        />
        <el-table-column prop="address" label="操作">
          <el-link type="primary">查看详情</el-link>
        </el-table-column>
      </el-table>
      <el-row type="flex" align="middle" justify="end" style="height:60px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
        />
      </el-row>
    </div>
    <!-- 工单配置 -->
    <el-dialog title="工单配置" :visible.sync="isConfigureShow" center>
      <div style="text-align:center">
        <span>补货警戒线：</span>
        <el-input-number v-model="num" controls-position="right" :min="1" style="width:396px" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isConfigureShow = false">取 消</el-button>
        <el-button type="primary" @click="isConfigureShow = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新建 -->

    <!-- 查看详情 -->
    <el-dialog title="工单详情" :visible.sync="outerVisible">
      <el-dialog
        width="30%"
        title="取消工单后，将不能恢复，是否确认取消？"
        :visible.sync="innerVisible"
        append-to-body
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchTask } from '@/api'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      taskList: [],
      statusList: [
        { label: '待办', value: 1 },
        { label: '进行', value: 2 },
        { label: '取消', value: 3 },
        { label: '完成', value: 4 }
      ],
      isConfigureShow: false,
      num: 30 // 补货警戒线

    }
  },
  created() {
    this.getTask()
  },
  methods: {
    async  onSubmit() {
      const { data } = await searchTask({ status: this.formInline.region, taskCode: this.formInline.user.trim() })
      console.log(data)
      this.taskList = data.currentPageRecords
      this.changeList(this.taskList)
    },
    async getTask() {
      const { data } = await searchTask()
      console.log(data)
      this.taskList = data.currentPageRecords
      this.changeList(this.taskList)
    },
    changeList(arr) {
      arr.forEach(item => {
        if (item.createType === 0) {
          item.createType = '自动'
        }
        if (item.createType === 1) {
          item.createType = '手动'
        }
        if (item.taskStatus === 1) {
          item.taskStatus = '待办'
        }
        if (item.taskStatus === 2) {
          item.taskStatus = '进行'
        }
        if (item.taskStatus === 3) {
          item.taskStatus = '取消'
        }
        if (item.taskStatus === 4) {
          item.taskStatus = '完成'
        }
        dayjs(item.createTime).format('YYYY.MM.DD HH:mm:ss')
      })
    },
    add() {}
  }
}
</script>

<style scoped lang='scss'>
.app-container {
padding: 0 !important;
   .top {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 0 0 17px;
    height: 64px;
    line-height: 64px;
    // .el-form {

    //   display: flex;
    //   align-items: center;
    // }
   }
   .main {
    background-color: #fff;
    padding:20px 15px 19px 17px;
    .el-table__row {
      border:unset !important;
    }
    .has-gutter {
      background-color: #f3f6fb;
      .is-leaf {
        padding:10px 0 9px ;
        color: #666;
        font-size: 14px;
      }
    }
   }
}
</style>
